<template>
  <div class="comment-body" :class="{ 'pop-comment-body': isPop }">
    <!--更多评论列表 -->
    <el-dialog
      v-model="centerDialogVisible"
      :title="'全部评论(' + postsDetail.comment_count + ')'"
      width="800px"
      left
      @open="popOpen"
    >
      <scroll-more height="600px" :load="getPopMore" :noMore="noMore" ref="popScrollRef">
        <comment
          :postsDetail="postsDetail"
          :isPop="true"
          ref="popComment"
          @popSetNoMore="setNoMore"
        ></comment>
      </scroll-more>
    </el-dialog>

    <!-- 弹框不显示回复 -->
    <div class="comment-box flex" v-if="!isPop">
      <userAvatar
        :userImgs="!userInfo?defaultHeaderImg: userInfo ? userInfo.user_avatar : userInfo.avatar"
        :showDv="userInfo?userInfo.is_authentication == 1:false"
        :imgWidth="40"
        :divWidth="46"
      ></userAvatar>
      <div class="comment-input-box">
        <reboundMsgInput
          :params="{ posts_id: postsDetail.id }"
          @confirm="sendConfirm"
        ></reboundMsgInput>
      </div>
    </div>

    <!-- 评论列表 -->
    <div
      class="comment-list"
      v-if="postsDetail.comment_count > 0"
      :class="{ 'pop-comment-body': isPop }"
    >
      <!-- 弹框不显示评论总数 -->
      <div class="comment-list-header f-j-sb-a-c" v-if="!isPop">
        <div class="comment-list-left-title">{{ postsDetail.comment_count }}条评论</div>

        <div class="comment-list-tab f-a-c">
          <div class="f-j-a-c" :class="{ active: tabActive == 0 }" @click="tabActive = 0">
            默认
          </div>
          <div class="f-j-a-c" :class="{ active: tabActive == 1 }" @click="tabActive = 1">
            最新
          </div>
        </div>
      </div>

      <div>
        <!-- :detail="{ show: true }" -->
        <commentItem
          :type="2"
          v-for="(item, index) in commentList"
          :key="index"
          :postsDetail="item"
          :commentIndex="index"
          @sendConfirm="sendConfirm"
        ></commentItem>
      </div>

      <!-- 查看全部评论 -->
      <div
        class="more-comment-box f-j-a-c"
        v-if="
          !isPop &&
          postsDetail.comment_count > 0 &&
          commentList.length >= commentLimit &&
          postsDetail.comment_count > commentList.length
        "
      >
        <div class="f-a-c" @click="centerDialogVisible = true">
          <span>查看全部评论</span>
          <svg-icon class="svg-icon" name="icon-sq"></svg-icon>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
  onMounted,
  computed,
  getCurrentInstance,
  watch,
  ref,
} from "vue";
import { commentByPostsId } from "@/axios/community.js";
import userAvatar from "@/components/userAvatar.vue";
import commentItem from "@/components/commentItem.vue";
import reboundMsgInput from "@/views/community/components/reboundMsgInput.vue";
import commentPop from "@/views/community/components/commentPop.vue";
import scrollMore from "@/components/scrollMore.vue";

export default defineComponent({
  name: "comment",
  props: {
    postsDetail: {
      type: Object,
      default: () => {},
      // default:{}
    }, //内容
    isPop: {
      type: Boolean,
      default: false,
    }, //是否为弹框 查看更多评论
  },
  components: {
    userAvatar,
    commentItem,
    reboundMsgInput,
    commentPop,
    scrollMore,
  },
  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const store = useStore();

    let popComment = ref(null); //弹框子组件

    let popScrollRef = ref(null); //弹框滚动box

    let data = reactive({
      content: "",
      tabActive: 0,
      commentList: [], //评论列表
      commentLimit: 10, //评论每页条数 默认10
      centerDialogVisible: false,
      page: 1, //请求页数
      noMore: true, //是否还有下一页
      defaultHeaderImg: new URL("../assets/img/tx@2x.png", import.meta.url).href,

    });

    let userInfo = computed(() => {
      return store.state.minUserInfo;
    });

    watch(
      () => props.postsDetail.showComment,
      (newVal, oldVal) => {
        if (newVal) {
          getCommentByPostsId();
        }
      }
    );

    // 获取评论列表
    let getCommentByPostsId = (more) => {
      if (more) {
        data.page += 1;
      } else {
        data.page = 1;
      }
      commentByPostsId({
        page: data.page,
        posts_id: props.postsDetail.id,
      }).then((res) => {
        let resultData = res.data;
        data.commentLimit = resultData.per_page;
        if (more) {
          data.commentList = [...data.commentList, ...resultData.data];
        } else {
          data.commentList = resultData.data;
        }
        data.noMore = resultData.data.length < resultData.per_page;
        // 如果当前页面作为子组件 获取列表后 修改父组件是否还有跟多字段
        if (props.isPop) {
          emit("popSetNoMore", data.noMore);
        }
      });
    };

    // 评论成功回调
    let sendConfirm = () => {
      getCommentByPostsId();
      props.postsDetail.comment_count += 1;
    };

    // 获取弹框更多评论
    let getPopMore = () => {
      if (popComment.value) {
        popComment.value.getCommentByPostsId(true);
      }
    };

    // 子组件修改父组件noMore
    let setNoMore = (noMore) => {
      data.noMore = noMore;
    };

    // 更多评论打开回调
    let popOpen = () => {
      // proxy.$nextTick(() => {
      // console.log(popScrollRef.value);
      popScrollRef.value.setScrllTop(0); //将滚动条位置初始到顶部
      // });
    };

    onMounted(() => {
      if (props.isPop) {
        getCommentByPostsId();
      }
    });

    return {
      popScrollRef,
      popOpen,
      setNoMore,
      getPopMore,
      popComment,
      getCommentByPostsId,
      sendConfirm,
      userInfo,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
// 按钮公用样式
.community-btn-class {
  border-radius: 10px;
  padding: 8px 20px;
  font-size: 14px;
  cursor: pointer;

  &:active {
    opacity: 0.7;
  }
}
.community-btn-default {
  border: 1px solid #65c8dc;
  color: #65c8dc;
}
.community-btn-green {
  background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
  color: #ffffff;
}
.community-btn-disabled {
  opacity: 0.7;
}

.comment-body {
  border-top: 1px solid #f5f6f7;
  padding-top: 15px;
  margin-top: 10px;
}

// 子元素去除边框和间距
.pop-comment-body {
  border-top: 0;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.comment-box {
  // padding: 0 20px;
  padding: 0 20px 20px;
}

// // 输入框
.comment-input-box {
  padding-left: 20px;
  flex: 1;
}

// 评论列表
.comment-list {
  border-top: 1px solid #f5f6f7;
  padding-top: 20px;
  // margin-top: 20px;
  .comment-list-header {
    padding: 0 20px;
    .comment-list-left-title {
      font-size: 16px;
      font-weight: bold;
    }

    .comment-list-tab {
      background: #f3f4f5;
      border-radius: 5px;
      padding: 2px;
      font-size: 14px;
      > div {
        // padding: 3px 10px;
        width: 48px;
        height: 24px;
        // padding: 5px 0;
        color: #656f79;
        // font-size: 14px;
        cursor: pointer;
      }
      > div.active {
        background: #ffffff;
        color: #64c8dc;
        border-radius: 5px;
        font-weight: bold;
      }
    }
  }

  // 查看全部评论
  .more-comment-box {
    padding-bottom: 20px;
    > div {
      font-size: 14px;
      color: #656f79;
      cursor: pointer;
      line-height: 20px;
      .svg-icon {
        width: 20px;
        height: 20px;
      }
    }
  }
}

// 更多评论弹框
:deep(.el-dialog) {
  border-radius: 20px;
}
:deep(.el-dialog__body) {
  padding-top: 10px !important;
}
</style>
